// 增加员工对话框的组件
<template>
  <el-dialog title="新增员工" :visible.sync="addFormVisible" width="40%" :show-close="false">
    <el-form ref="addRef" :model="addForm" :rules="addRule">
      <el-form-item label="姓名" prop="username">
        <el-input v-model="addForm.username" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="手机" prop="mobile">
        <el-input v-model="addForm.mobile" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="入职时间" prop="timeOfEntry">
        <el-input v-model="addForm.timeOfEntry" autocomplete="off" type="date"></el-input>
      </el-form-item>
      <el-form-item label="聘用形式" prop="formOfEmployment"><br>
        <el-select v-model="addForm.formOfEmployment" placeholder="请选择活动区域" width="100%">
          <el-option label="正式" value="1"></el-option>
          <el-option label="非正式" value="2"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="工号" prop="workNumber">
        <el-input v-model="addForm.workNumber" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="部门" prop="departmentName">
        <el-input v-model="addForm.departmentName" autocomplete="off" @focus="getDepartments"></el-input>
        <el-tree v-if="showTree" :data="departs" :props="{ label: 'name' }" @node-click="handleNodeClick"></el-tree>
      </el-form-item>
      <el-form-item label="转正时间" prop="correctionTime">
        <el-input v-model="addForm.correctionTime" autocomplete="off" type="date"></el-input>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" @click="postAddForm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { addEmployee } from '@/api/employee'
export default {
    props: {
      addFormVisible: {
        type: Boolean,
        default: false
      }
    },
    data() {
      return {
        showTree: false,
        addForm: {
          username: '',
          mobile: '',
          formOfEmployment: '',
          workNumber: '',
          departmentName: '',
          timeOfEntry: '',
          correctionTime: ''
        },
        departs: [{ name: '总裁办', manager: '曹操', children: [{ name: '董事会', manager: '曹丕' }] },
        { name: '行政部', manager: '刘备' },
        { name: '人事部', manager: '孙权' }],
        addRule: {
          username: [
            { required: true, message: '请输入员工姓名', trigger: 'blur' },
            { min: 2, max: 6, message: '长度在 2 到 6 个字符', trigger: 'blur' }
          ],
          mobile: [
            { required: true, message: '请选择手机号', trigger: 'blur' }
          ],
          timeOfEntry: [
            { required: true, message: '请选择入职时间', trigger: 'blur' }
          ],
          formOfEmployment: [
            { required: true, message: '请选择聘用形式', trigger: 'blur' }
          ],
          workNumber: [
            { required: true, message: '请选择工号', trigger: 'blur' }
          ],
          departmentName: [
            { required: false, message: '请选择部门', trigger: 'blur' }
          ],
          correctionTime: [
            { required: true, message: '请选择入职时间', trigger: 'blur' }
          ]
        }
      }
    },
    methods: {
        getDepartments() {
          this.showTree = true
        },
        handleNodeClick(data) {
          this.addForm.departmentName = data.name
          this.showTree = false
        },
        async postAddForm() {
          try {
            await this.$refs.addRef.validate()
            await addEmployee(this.addForm)
            // 通知父组件
            this.$parent.getTableData() && this.$parent.getTableData()
            this.$refs.addRef.resetFields()
            this.$message.success('添加成功')
            this.$parent.addFormVisible = false
            } catch (error) {
              console.log(error);
          }
        },
        cancel() {
          this.$refs.addRef.resetFields()
          // this.$emit('update: addFormVisible', false)
          // update:props名称  可以在父组件中直接用sync修饰
          // 把属性改成false了
          // this.$emit('closeDialog', false)
          this.$parent.addFormVisible = false
        }
    }
}
</script>
<style scope>
.el-form {
    padding:0px 35px
}
.el-form-item {
    margin: 12px 0
}
.el-dialog__header {
    background-color: lightskyblue;
    line-height: 30px;
}
.el-dialog__body {
    padding-top: 20px
}
.el-select {
    width: 100%
}
</style>
